<template>
  <div class="app-container home">
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="12" :sm="6" :lg="6" class="card-panel-col">
        <el-card class="card-panel shipped-quantity-card">
          <div class="card-panel-description">
            <div class="card-panel-text">总出货量</div>
            <div class="card-panel-num">1,248,760</div>
            <div class="card-panel-subtext">今日出货量: 12,450</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :lg="6" class="card-panel-col">
        <el-card class="card-panel total-orders-card">
          <div class="card-panel-description">
            <div class="card-panel-text">总订单量</div>
            <div class="card-panel-num">2,674,930</div>
            <div class="card-panel-subtext">今日订单量: 28,360</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :lg="6" class="card-panel-col">
        <el-card class="card-panel registered-shops-card">
          <div class="card-panel-description">
            <div class="card-panel-text">店铺注册量</div>
            <div class="card-panel-num">387,650</div>
            <div class="card-panel-subtext">今日店铺注册量: 2,370</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :lg="6" class="card-panel-col">
        <el-card class="card-panel total-sales-card">
          <div class="card-panel-description">
            <div class="card-panel-text">总销售额</div>
            <div class="card-panel-num">¥5,764,920</div>
            <div class="card-panel-subtext">今日销售额: ¥548,930</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Charts Section -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :lg="14">
        <el-card>
          <div slot="header" class="clearfix">
            <span>平台月订单量</span>
          </div>
          <div id="monthly-orders-chart" style="height: 350px;"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="10">
        <el-card>
          <div slot="header" class="clearfix">
            <span>平台订单占比</span>
          </div>
          <div id="platform-order-ratio-chart" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Recent Orders and Quick Entry -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :lg="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span>近日订单</span>
          </div>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="orderId" label="订单编号"></el-table-column>
            <el-table-column prop="paymentMethod" label="支付方式"></el-table-column>
            <el-table-column prop="productQuantity" label="商品数量"></el-table-column>
            <el-table-column prop="totalAmount" label="订单总额"></el-table-column>
            <el-table-column prop="deliveryAddress" label="收货地址"></el-table-column>
            <el-table-column prop="paymentStatus" label="支付状态"></el-table-column>
            <el-table-column prop="paymentTime" label="支付时间"></el-table-column>
            <el-table-column prop="orderNotes" label="订单备注"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>快捷入口</span>
          </div>
          <div class="quick-entry-buttons">
            <el-button type="primary" plain>私域营销系统</el-button>
            <el-button plain>状态与日志</el-button>
          </div>
          <div style="text-align: center; margin-top: 20px;">
            <img src="@/assets/images/profile.jpg" alt="Quick Entry Image" style="width: 80%; max-width: 200px;">
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// This is a new script block. If there's an existing script block, please
// merge this content with the existing script block to avoid conflicts.
import Echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      version: "3.6.5", // Keep existing version, if any
      recentOrders: [
        {
          orderId: "ORD802855912",
          paymentMethod: "银联",
          productQuantity: 7,
          totalAmount: "¥ 2688.00",
          deliveryAddress: "山东省",
          paymentStatus: "已关闭",
          paymentTime: "2025-04-24 18:23:22",
          orderNotes: "需要礼品包装",
        },
        {
          orderId: "ORD802855252",
          paymentMethod: "支付宝",
          productQuantity: 10,
          totalAmount: "¥ 3360.00",
          deliveryAddress: "四川省",
          paymentStatus: "已支付",
          paymentTime: "2025-05-18 18:23:22",
          orderNotes: "周末送货",
        },
        {
          orderId: "ORD802855602",
          paymentMethod: "支付宝",
          productQuantity: 5,
          totalAmount: "¥ 2620.00",
          deliveryAddress: "山东省",
          paymentStatus: "已关闭",
          paymentTime: "2025-05-18 18:23:22",
          orderNotes: "加急处理",
        },
        {
          orderId: "ORD8028553",
          paymentMethod: "微信",
          productQuantity: 8,
          totalAmount: "¥ 1500.00",
          deliveryAddress: "上海市",
          paymentStatus: "已支付",
          paymentTime: "2025-05-17 10:30:00",
          orderNotes: "无",
        },
      ],
      monthlyOrdersChart: null,
      platformOrderRatioChart: null,
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    initMonthlyOrdersChart() {
      if (this.monthlyOrdersChart) {
        this.monthlyOrdersChart.dispose();
      }
      this.monthlyOrdersChart = Echarts.init(document.getElementById('monthly-orders-chart'));
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 单'
          }
        },
        series: [{
          data: [10000, 15000, 20000, 25000, 28000], // Dummy data
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      };
      this.monthlyOrdersChart.setOption(option);
    },
    initPlatformOrderRatioChart() {
      if (this.platformOrderRatioChart) {
        this.platformOrderRatioChart.dispose();
      }
      this.platformOrderRatioChart = Echarts.init(document.getElementById('platform-order-ratio-chart'));
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['抖音', '微信', '淘宝', '京东', '其他']
        },
        series: [
          {
            name: '订单来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 32450, name: '抖音' },
              { value: 28190, name: '微信' },
              { value: 26580, name: '淘宝' },
              { value: 18970, name: '京东' },
              { value: 5000, name: '其他' }
            ]
          }
        ]
      };
      this.platformOrderRatioChart.setOption(option);
    }
  },
  mounted() {
    this.initMonthlyOrdersChart();
    this.initPlatformOrderRatioChart();
    window.addEventListener('resize', () => {
      if (this.monthlyOrdersChart) {
        this.monthlyOrdersChart.resize();
      }
      if (this.platformOrderRatioChart) {
        this.platformOrderRatioChart.resize();
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      if (this.monthlyOrdersChart) {
        this.monthlyOrdersChart.resize();
      }
      if (this.platformOrderRatioChart) {
        this.platformOrderRatioChart.resize();
      }
    });
    if (this.monthlyOrdersChart) {
      this.monthlyOrdersChart.dispose();
    }
    if (this.platformOrderRatioChart) {
      this.platformOrderRatioChart.dispose();
    }
  }
};
</script>

<style scoped>
/* This is a new style block. If there's an existing style block, please
merge this content with the existing style block to avoid conflicts. */
.home {
  line-height: 1.5;
}

.panel-group {
  margin-top: 18px;
}

.card-panel-col {
  margin-bottom: 32px;
}

.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-panel-description {
  text-align: center;
  font-weight: bold;
}

.card-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
  margin-bottom: 5px;
}

.card-panel-subtext {
  font-size: 12px;
  color: #999;
}

.shipped-quantity-card {
  background-color: #fcebeb;
  color: #e06c75;
}
.total-orders-card {
  background-color: #e6f7ff;
  color: #1890ff;
}
.registered-shops-card {
  background-color: #f9edff;
  color: #9753a7;
}
.total-sales-card {
  background-color: #e0fcfb;
  color: #009688;
}

.quick-entry-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
</style>

